import { defineComponent, ref } from "vue";
import VChart from "vue-echarts";
import { use } from "echarts/core";
import { RadarChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import "./EquipmentRadar.css";

use([RadarChart, TitleComponent, TooltipComponent, LegendComponent, RadarComponent, CanvasRenderer]);

export default defineComponent({
  name: "EquipmentRadar",
  components: {
    VChart,
  },
  setup() {
    const chartOption = ref({
      tooltip: {
        backgroundColor: "rgba(0, 0, 0, 0.8)",
        borderColor: "#00d4ff",
        borderWidth: 1,
        textStyle: {
          color: "#fff",
        },
      },
      legend: {
        data: ["当前状态", "标准水平"],
        textStyle: {
          color: "#fff",
        },
        bottom: 10,
      },
      radar: {
        indicator: [
          { name: "陆军装备", max: 100 },
          { name: "海军装备", max: 100 },
          { name: "空军装备", max: 100 },
          { name: "导弹系统", max: 100 },
          { name: "通信系统", max: 100 },
          { name: "后勤保障", max: 100 },
        ],
        shape: "polygon",
        splitNumber: 4,
        name: {
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
        },
        splitLine: {
          lineStyle: {
            color: "rgba(0, 212, 255, 0.2)",
          },
        },
        splitArea: {
          show: true,
          areaStyle: {
            color: [
              "rgba(0, 212, 255, 0.05)",
              "rgba(0, 212, 255, 0.1)",
              "rgba(0, 212, 255, 0.05)",
              "rgba(0, 212, 255, 0.1)",
            ],
          },
        },
        axisLine: {
          lineStyle: {
            color: "rgba(0, 212, 255, 0.3)",
          },
        },
      },
      series: [
        {
          name: "装备状态",
          type: "radar",
          data: [
            {
              value: [92, 88, 85, 90, 78, 82],
              name: "当前状态",
              areaStyle: {
                color: "rgba(0, 212, 255, 0.3)",
              },
              lineStyle: {
                color: "#00d4ff",
                width: 2,
              },
              itemStyle: {
                color: "#00d4ff",
              },
            },
            {
              value: [85, 85, 85, 85, 85, 85],
              name: "标准水平",
              areaStyle: {
                color: "rgba(0, 255, 136, 0.2)",
              },
              lineStyle: {
                color: "#00ff88",
                width: 2,
                type: "dashed",
              },
              itemStyle: {
                color: "#00ff88",
              },
            },
          ],
        },
      ],
    });

    return () => (
      <div class="equipment-radar">
        <div class="equipment-radar__header">
          <h3 class="equipment-radar__title">装备状态评估</h3>
        </div>
        <div class="equipment-radar__chart">
          <VChart option={chartOption.value} autoresize style="height: 100%; width: 100%;" />
        </div>
      </div>
    );
  },
});
